<template>
  <div>
    <el-container>
      <el-header>
        <span class="left">商品类目销售统计</span>
        <div style="float:right;">
          <a class="el-button" size="mini" id ='dc'>导出数据</a>
          <el-button-group class="header_right">
            <el-button size="mini" class="header_right"  autofocus="autofocus">昨天</el-button>
            <el-button size="mini" class="header_right">最近7天</el-button>
            <el-button size="mini" class="header_right">最近30天</el-button>
          </el-button-group>
          <el-date-picker
            class="header_right"
            v-model="dateRange"
            size="mini"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="fetchData()"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
      </el-header>
    <el-main>
        <div id="category1Count_sheet" style="width: 1000px;height:300px;"></div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="categoryId1" label="编号" width="100"></el-table-column>
      <el-table-column prop="categoryName" label="一级分类名称" width="200"></el-table-column>
      <el-table-column prop="num" label="销售数量"></el-table-column>
      <el-table-column width="180" label="数量比例">
        <template slot-scope="scope">{{(scope.row.num / totalNum * 100).toFixed(2)}}%</template>
      </el-table-column>
      <el-table-column prop="money" label="销售金额"></el-table-column>
      <el-table-column width="180" label="金额比例">
        <template slot-scope="scope">{{(scope.row.money / totalMoney * 100).toFixed(2)}}%</template>
      </el-table-column>
    </el-table>
    </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: ["2020-08-06", "2020-08-06"],
      dateRange: [],
      totalMoney: 0,
      totalNum: 0,
      nameList: [],
      kyList: [],
      moneyList: []
    }
  },
  methods: {
    async fetchData() {
      this.tableData = []
      this.nameList = []
      this.kyList = []
      this.moneyList = []
      console.log("category report")
      const date1 = this.dateRange[0];
      const date2 = this.dateRange[1];

      const { data: res } = await this.$http.get(
        `orders/category/report/categoryCount2?date1=${date1}&date2=${date2}`
      );
      console.log(res.data);
      this.tableData = res.data;
      for (let i = 0; i < this.tableData.length; i++) {
        this.totalNum += this.tableData[i].num;
        this.totalMoney += this.tableData[i].money;
        this.nameList.push(this.tableData[i].categoryName);
        this.kyList.push({ value: this.tableData[i].num, name: this.tableData[i].categoryName })
        this.moneyList.push({ value: this.tableData[i].money, name: this.tableData[i].categoryName })
      }
      var myChart = this.$echarts.init(document.getElementById("category1Count_sheet"))
      var option = {
        title: {
          text: "商品分析",
          subtext: "纯属虚构",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: this.nameList
        },
        series: [
          {
            name: "销售额",
            type: "pie",
            radius: "35%",
            center: ["35%", "55%"],
            data: this.kyList,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }, {
            name: "money",
            type: "pie",
            radius: "35%",
            center: ["75%", "55%"],
            data: this.moneyList,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  },
  mounted() {
    this.fetchData()
  }
};
</script>

<style scoped>
.el-header {
  background-color: rgba(228, 228, 228, 1);
  color: #333;
  text-align: center;
  line-height: 60px;
}
.left {
  float: left;
}
.header_right {
  margin-left: 15px;
}
</style>
